<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$珠峰培训$</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            background: paleturquoise;
        }
        #div1{
            width: 400px;
            margin: 50px auto;
            position: relative;
        }
        #div1 ul li{
            list-style: none;
            background: white;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #ccc;
            margin: 10px;
            font-size: 20px;
            user-select: none;
            color: #333;
            position:relative;
            overflow: hidden;
        }
        .point{
            width:20px;
            height: 20px;
            border-radius: 50%;
            background: #0AEEAA;
            animation: move 0.5s both;
            position: absolute;
            display: none;
        }
        @keyframes move {
            0%{
                transform: scale(0);
                opacity: 1;
            }
            100%{
                transform: scale(13);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div id='div1'>
    <ul>
        <li>珠峰培训1 <span class="point"></span></li>
        <li>珠峰培训2 <span class="point"></span></li>
        <li>珠峰培训3 <span class="point"></span></li>
    </ul>
</div>
</body>
</html>
<script>
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function (e) {
        var tar = e.target;
        var point = tar.getElementsByClassName('point')[0];
        if(tar.nodeName == 'LI'){
            point.style.display = 'block';
            point.style.left = e.offsetX - point.clientWidth/2 + 'px';
            point.style.top = e.offsetY - point.clientHeight/2 + 'px';
        }
        setTimeout(function () {
            point.style.display = 'none';
        },1000)
    }
</script>  